<template>
  <div class="main">
    <div class="main-header">
      <div class="main-title">{{ props.title }}</div>
      <div class="sale-info">
        <div class="info"><div class="info-title">单号</div><el-input size="small" v-model="headerInfo.orderNo"></el-input></div>
        <div class="info"><div class="info-title">日期</div><el-date-picker size="small" v-model="headerInfo.date" type="datetime" placeholder="请选择单据时间" format="YYYY/MM/DD HH:mm:ss"></el-date-picker></div>
      </div>
      <div class="customer-info">
        <el-button size="small"><el-icon><Refresh /></el-icon></el-button>
        <span class="info-title">客户编码</span>
        <el-input size="small" style="width: 100px;" v-model="customerInfo.customerId"></el-input>
        <span class="info-title">名称</span>
        <el-input size="small" style="width: calc(100vw - 560px);" v-model="customerInfo.customerId"></el-input>
        <span class="info-title">电话</span>
        <el-input size="small" style="width: 120px;" v-model="customerInfo.customerId"></el-input>
        <span class="info-title">地址</span>
        <el-input size="small" style="width: 150px;" v-model="customerInfo.customerId"></el-input>
      </div>
    </div>
    <div class="goods-info">
      <el-table size="small" border header-row-class-name="goods-table-header">
        <el-table-column label="No." width="40"></el-table-column>
        <el-table-column label="编码"></el-table-column>
        <el-table-column label="品名" width="250"></el-table-column>
        <el-table-column label="规格" width="50"></el-table-column>
        <el-table-column label="件数" width="80"></el-table-column>
        <el-table-column label="件单位" width="60"></el-table-column>
        <el-table-column label="件价" width="80"></el-table-column>
        <el-table-column label="散数"></el-table-column>
        <el-table-column label="散单位"></el-table-column>
        <el-table-column label="单价"></el-table-column>
        <el-table-column label="金额"></el-table-column>
        <el-table-column label="存点"></el-table-column>
        <el-table-column label="备注"></el-table-column>
      </el-table>
    </div>

    <div class="footer">
      <div class="statistic-wrapper">
        <div class="total">
          <span class="total-label">总金额</span>
          <span class="count">120000.00</span>
        </div>
      </div>
      <div class="good-item-form" style="padding-top: 50px;">
        <el-button size="small">...</el-button>
        <div class="good-info-item">
          <div class="label">货品编码</div>
          <el-input size="small"></el-input>
        </div>
        <div class="good-info-item">
          <div class="label">品名</div>
          <el-input size="small" style="width: 200px;"></el-input>
        </div>
        <div class="good-info-item" style="margin-left: 20px;">
          <div class="label">规格</div>
          <el-input size="small" style="width: 50px;"></el-input>
        </div>
        <div class="good-info-item">
          <div class="label">件数</div>
          <el-input size="small" style="width: 90px;"></el-input>
        </div>
        <div class="good-info-item">
          <div class="label">件价</div>
          <el-input size="small" style="width: 90px;"></el-input>
        </div>
        <div class="good-info-item">
          <div class="label">散数</div>
          <el-input size="small" style="width: 90px;"></el-input>
        </div>
        <div class="good-info-item">
          <div class="label">单价</div>
          <el-input size="small" style="width: 130px;"></el-input>
        </div>
        <div class="good-info-item">
          <div class="label">存点</div>
          <el-select size="small" style="width: 90px;"></el-select>
        </div>
      </div>
      <div class="good-item-form">
        <div class="good-info-item">
          <div class="label">备注</div>
          <el-input size="small" style="width: 200px;"></el-input>
        </div>
      </div>

      <div class="handle-button">
        <div class="button-item">
          <div>保存</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import {reactive, ref} from "vue";

const props = defineProps({
  title: String
})

// header信息
const headerInfo = reactive({
  orderNo: '123456',
  date: '2024-02-24'
})

// 客户信息
const customerInfo = reactive({
  customerId: '',
  customerName: '',
  telephone: '',
  address: ''
})
</script>

<style lang="less" scoped>
.main {
  font-family: '宋体';
  .main-title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    font-size: 20px;
    padding-top: 20px;
  }

  .main-header {
    position: relative;
    background-color: #c1f8f3;
    .sale-info {
      width: 200px;
      position: absolute;
      top: 0;
      right: 0;
      .info {
        display: flex;
        align-items: center;
        font-size: 12px;
        .info-title {
          white-space: nowrap;
          margin-right: 6px;
        }
      }
    }
  }

  .customer-info {
    display: flex;
    align-items: center;
    margin-top: 20px;
    padding-bottom: 5px;
    .info-title {
      font-size: 11px;
      margin: 0 5px;
    }
  }

  .goods-info {
    height: calc(100vh - 400px);
    border: 1px solid var(--el-border-color);
  }
}

.footer {
  background-color: #c1f8f3;
  height: 300px;
  .statistic-wrapper {
    position: relative;
    .total {
      position: absolute;
      right: 0;
      top: 5px;
      width: 150px;
      border: 1px solid #666666;
      background-color: #bdfd98;
      border-radius: 4px;
      padding: 10px;
      .count {
        position: absolute;
        right: 10px;
        top: 8px;
        text-decoration: underline;
        font-weight: bold;
        font-size: 18px;
      }
    }
  }

  .good-item-form {
    display: flex;
    align-items: flex-end;
    .good-info-item {
      .label {
        font-size: 12px;
      }
    }
  }

  .handle-button {
    position: fixed;
    bottom: 10px;
    background-color: #fff;
    margin: 20px 50px;
    padding: 5px;
    border-radius: 15px;
    box-shadow: var(--el-box-shadow);
    .button-item {
      &:hover {
        background-color: #F5F7FA;
        cursor: pointer;
      }
    }
  }
}
</style>

<style lang="less">
.goods-table-header {
  .el-table__cell {
    background-color: #fdfde0 !important;
    color: #333333;
  }
}
</style>
